<template>
    <a-drawer title="输入数据" size="large" placement="right" v-if="open" v-model:visible="open">
        <div>
            <a-form :model="params" name="basic" :label-col="{ span: 10 }">
                <a-row>
                    <a-col :span="11">
                        <a-form-item label="申请单位" name="unit">
                            <a-select v-model:value="params.unit" style="width: 200px">
                                <a-select-option v-for="item of unit" :value="item" :key="item">
                                    {{ item }}</a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item label="作业申请时间" name="requestTime">
                            <a-date-picker v-model:value="params.requestTime" format="YYYY-MM-DD" style="width: 200px" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="11">
                        <a-form-item label="作业区域所在单位" name="unit_located">
                            <a-select v-model:value="params.unit_located" style="width: 200px">
                                <a-select-option v-for="item of unit" :value="item" :key="item">
                                    {{ item }}</a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item label="属地监督" name="territorial_oversight">
                            <a-input v-model:value="params.territorial_oversight" style="width: 200px" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="11">
                        <a-form-item label="监护人" name="guardian">
                            <a-input v-model:value="params.guardian" style="width: 200px" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item label="申请人" name="applicant">
                            <a-input v-model:value="params.applicant" style="width: 200px" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="11">
                        <a-form-item label="作业人" name="operator">
                            <a-input v-model:value="params.operator" style="width: 200px" />
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row>
                    <a-col :pull="4" :span="20">
                        <a-form-item label="非常规/特殊作业" name="involves_special_operations">
                            <a-select v-model:value="params.involves_special_operations" style="width: 530px"
                                placeholder="涉及的其他非常规作业、特殊作业">
                                <a-select-option v-for="item of unconventionalTasks" :value="item" :key="item">
                                    {{ item }}</a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :pull="4" :span="20">
                        <a-form-item label="作业许可证编号" name="other_unroutine_operations">
                            <a-input v-model:value="params.other_unroutine_operations" style="width: 530px"
                                placeholder="涉及的其他非常规作业、特殊作业许可证编号" />
                        </a-form-item>
                    </a-col>
                    <a-col :pull="4" :span="20">
                        <a-form-item label="作业地点" name="wellId">
                            <!-- <a-select v-model:value="auxiliary.wellId" style="width: 530px">
                                <a-select-option v-for="item of operationPlace" :value="item" :key="item">
                                    {{ item }}</a-select-option>
                            </a-select> -->
                        </a-form-item>
                    </a-col>
                    <a-col :pull="4" :span="20">
                        <a-form-item label="作业部门" name="tasksDepartment">
                            <a-select v-model:value="auxiliary.tasksDepartment" style="width: 530px">
                                <a-select-option v-for="item of tasksDepartment" :value="item" :key="item">
                                    {{ item }}</a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :pull="4" :span="20">
                        <a-form-item label="作业内容" name="job_content">
                            <a-select v-model:value="params.job_content" style="width: 530px">
                                <a-select-option v-for="item of unconventionalTasks" :value="item" :key="item">
                                    {{ item }}</a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :span="11">
                        <a-form-item label="作业内容签名" name="job_content_signature">
                            <a-input v-model:value="params.job_content_signature" style="width: 200px"
                                placeholder="针对作业内容签名" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item label="签字时间" name="job_content_date">
                            <a-date-picker v-model:value="params.job_content_date" format="YYYY-MM-DD" style="width: 200px"
                                placeholder="签字时间" />
                        </a-form-item>
                    </a-col>
                    <a-col :pull="4" :span="20">
                        <a-form-item label="是否编制方案" name="programming">
                            <a-radio-group v-model:value="params.programming" buttonStyle="solid">
                                <a-radio :value="'是'">是</a-radio>
                                <a-radio :value="'否'">否</a-radio>
                            </a-radio-group>
                        </a-form-item>
                    </a-col>
                    <a-col :span="11">
                        <a-form-item label="作业开始时间" name="start_time">
                            <a-date-picker v-model:value="params.start_time" format="YYYY-MM-DD" style="width: 200px"
                                placeholder="作业开始时间" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item label="作业结束时间" name="terminate_time">
                            <a-date-picker v-model:value="params.terminate_time" format="YYYY-MM-DD" style="width: 200px"
                                placeholder="作业结束时间" />
                        </a-form-item>
                    </a-col>
                    <a-col :pull="4" :span="20">
                        <a-form-item label="存在的风险" name="existential_risks">
                            <a-checkbox-group v-model:value="existential_risks" name="checkboxgroup" :options="plainOptions"
                                style="width: 530px" />
                        </a-form-item>
                    </a-col>
                </a-row>
            </a-form>
            <a-divider />
            <a-button type="primary" style="width: 100%;" @click="getSubmit">提交</a-button>
        </div>
    </a-drawer>
</template>
<script setup>
import { ref } from 'vue';
import { createLicence, updateOne, } from '@/api/salvage/workPermit.js'
import { unconventionalTasks, tasksDepartment, unit, plainOptions } from '@/custom/salvage/constant/report.js'
import dayjs from 'dayjs'
import "dayjs/locale/zh-cn"
import "moment/locale/zh-cn"
import moment from "moment";
import useApp from "@/hooks";
const { $, proxy } = useApp();
const emit = defineEmits(["editData", 'deliverData'])
const props = defineProps({
    state: String,
    schemesData: Object
})
const auxiliary = ref({
    wellId: '',
    tasksDepartment: ''
})
const params = reactive({
    unit: '',
    requestTime: '',
    unit_located: '',
    territorial_oversight: '',
    guardian: '',
    applicant: '',
    operator: '',
    involves_special_operations: '',
    other_unroutine_operations: '',
    wellId: '',
    job_content: '',
    job_content_signature: '',
    job_content_date: '',
    programming: '',
    start_time: '',
    terminate_time: '',
    existential_risks: '',
});
const existential_risks = ref([])
const open = ref(false)

watch([() => props.state, () => props.schemesData], ([newState, newSchemesData]) => {
    console.log('watch state:', newState);
    console.log('watch schemesData:', newSchemesData);
    getReportQuery()
}, { deep: true })

// 共有属性赋值赋值
function setNewData(res) {
    console.log('setNewData', res);
    //日期处理
    if (res.requestTime) { res.requestTime = dayjs(res.requestTime, 'YYYY-MM-DD') }
    if (res.job_content_date) { res.job_content_date = dayjs(res.job_content_date, 'YYYY-MM-DD') }
    if (res.start_time) { res.start_time = dayjs(res.start_time, 'YYYY-MM-DD') }
    if (res.terminate_time) { res.terminate_time = dayjs(res.terminate_time, 'YYYY-MM-DD') }

    for (const key in res) {
        if (res.hasOwnProperty(key) && params.hasOwnProperty(key)) {
            params[key] = res[key];
        }
    }
}
// 获取数据
function getReportQuery() {
    console.log('getReportQuery-state', props.state);
    if (props.state === "修改") {
        console.log('getReportQuery-修改', props.schemesData);
        setNewData(props.schemesData);
    } else if (props.state === "补充") {
        console.log('props.schemesData', props.schemesData)
        resetParams(params); //重置params对象
        auxiliary.value.wellId = props.schemesData.wellId
    } else {
        resetParams(params); //重置params对象
    }
}
getReportQuery()

// 提交
function getSubmit() {
    console.log('getSubmit', params);
    // 日期格式化
    if (params.requestTime) {
        params.requestTime = moment(params.requestTime).format('YYYY-MM-DD')
        // params.requestTime = dayjs(params.requestTime).format('YYYY-MM-DD')
    }
    // if (params.job_content_date) { params.job_content_date = dayjs(params.job_content_date).format('YYYY-MM-DD') }
    // if (params.start_time) { params.start_time = dayjs(params.start_time).format('YYYY-MM-DD') }
    // if (params.terminate_time) { params.terminate_time = dayjs(params.terminate_time).format('YYYY-MM-DD') }

    params.wellId = auxiliary.value.wellId + '(' + auxiliary.value.tasksDepartment + ')'
    params.existential_risks = existential_risks.value.join(',')
    createLicence(params.wellId).then(res => {
        // localStorage.setItem("schemeId", res.id);
        // localStorage.setItem("wellId", res.wellId);
        console.log('createSchemes', res);
        updateOne(res.id, params).then(e => {
            $.showToast({
                title: '方案新建成功',
                icon: 'success'
            })
            open.value = false
            console.log('updateOne', e);
            emit('deliverData', e)
        })
    })

}

// 重置params对象
function resetParams(obj) {
    for (let key in obj) {
        if (Array.isArray(obj[key])) {
            obj[key] = []; // 清空数组
        } else if (typeof obj[key] === 'object' && obj[key] !== null) {
            resetParams(obj[key]); // 递归处理嵌套的对象
        } else {
            obj[key] = ''; // 重置属性
        }
    }
}
function openDrawer() {
    open.value = true;
}
defineExpose({
    openDrawer: openDrawer
})
</script>
<style scoped>
.steps-content {
    margin-top: 16px;
    border: 1px dashed #e9e9e9;
    border-radius: 6px;
    background-color: #fafafa;
    min-height: 200px;
    text-align: center;
    padding-top: 80px;
}

.steps-action {
    margin-top: 24px;
}

[data-theme='dark'] .steps-content {
    background-color: #2f2f2f;
    border: 1px dashed #404040;
}
</style>